<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <title>Vue 测试</title>
    <link rel="stylesheet" href="styles/index.css" />
    <script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
  </head>
  <body>
    <script type="text/x-template" id="father">
      <div ref="fatherRef">
        <header class="header">
          <h1>Vue 生命周期测试</h1>
          绑定了beforeCreate : {{beforeCreate}}
        </header>
        <div>
          <h2>父组件</h2>
          <son></son>
        </div>
      <div>
    </script>

    <script type="text/x-template" id="son">
      <div class="grid">
         子组件
       </div>
    </script>

    <div id="demo">
      <father v-if="hide"> </father>
      <button @click="handleClick">toggle</button>
    </div>

    <!-- Scripts -->
    <script src="/scripts/components.js"></script>
    <script src="/scripts/index.js"></script>
  </body>
</html>
